<form class="layui-form layui-card layui-form-pane" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off" style="padding: 10px;">
    <div class="layui-card-body" style="min-height: 400px;">
        <div class="layui-form-item">
            <label class="layui-form-label label-required">分派作业人员</label>
            <div class="layui-input-block">
                <div id="users" onclick="btn_click()"></div>
            </div>
        </div>
        <blockquote class="layui-elem-quote" style="text-align: center;">详细数据</blockquote>
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="150">
                <col width="150">
            </colgroup>
            <thead>
                <tr>
                    <th class="text-center">姓名</th>
                    <th class="text-center">完成件数</th>
                    <th class="text-center">超时罚款总额</th>
                    <th class="text-center">商品买赔总金额</th>
                    <th class="text-center">其他罚款总金额</th>
                </tr>
            </thead>
            <tbody class="users_content">
                    
            </tbody>
        </table>
            
    </div>

    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
    {notempty name='vo.plan_id'}<input type='hidden' value='{$vo.plan_id}' name='plan_id'>{/notempty}
    {notempty name='vo.count'}<input type='hidden' value='{$vo.count}' name='count'>{/notempty}
    <input type='hidden' value='{$vo.type}' name='type'>
    <input type='hidden' value='{$vo.classify}' name='classify'>
    <input type='hidden' value='{$vo.att}' name='att'>

    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>


    <script>
        window.form.render();
        var count = '{$vo.count??0}';
        //加载课件下拉多选组件
        var course_ware = xmSelect.render({
            el: '#users',
            //文字背景颜色
            theme: {
                color: '#1cbbb4',
            },
            //全选清空辅助按钮
            toolbar: { show: true },
            on: function(data){
                //arr:  当前多选已选中的数据
                var arr = data.arr;
                //change, 此次选择变化的数据,数组
                var change = data.change;
                //isAdd, 此次操作是新增还是删除
                var isAdd = data.isAdd;
                
                console.log(arr)
                console.log(change)
                console.log(isAdd)
                $('.users_content').html('');
                $.each(arr, function(index,element){
                    console.log(element)
                    var html = `
                    <tr>
                        <td class='text-center'>
                            ${element.name}
                        </td>
                        <td class='text-center'>
                            <input type="number" required name="content[complete_count][]" value='${element.complete_count}' placeholder="完成件数" class="layui-input">
                        </td>
                        <td class='text-center'>
                            <input type="text" required name="content[timeout_fine_price][]" value='${element.timeout_fine_price?element.timeout_fine_price:0}' placeholder="超时罚款总额" class="layui-input">
                        </td>
                        <td class='text-center'>
                            <input type="text" required name="content[goods_fine_price][]" value='${element.goods_fine_price?element.goods_fine_price:0}' placeholder="商品买赔总金额" class="layui-input">
                        </td>
                        <td class='text-center'>
                            <input type="text" required name="content[other_fine_price][]" value='${element.other_fine_price?element.other_fine_price:0}' placeholder="其他罚款总金额" class="layui-input">
                        </td>
                        <input type="hidden" required name="content[uid][]" value='${element.id}'>
                        <input type="hidden" required name="content[name][]" value='${element.name}'>
                    </tr>
                    `;
                    $('.users_content').append(html);
                })
            },
            max: count,//选择上限
            maxMethod(seles, item){
                layer.msg('不能选了, 已经超了', {icon: 2}); 
            },
            //提交的name名
            name: 'uids',
            //提示信息
            tips: '请选择作业人员',
            //开启搜索
            filterable: true,
            //分页
            paging: true,
            pageSize: 10,
            height: 'auto',
            //自动换行
            autoRow: true,
            //自定义数据匹配key名称
            prop: {
                name: 'name',
                value: 'id',
                // children: 'children',
            },
            data: []
        })
        var select = '{$vo.uids??""}';
        
        var select = select.split(',');
        $.get('{:url("get_users")}', 
            {
                'plan_detail_id':$('input[name="id"]').val(),
                'type':$('input[name="type"]').val(),
                'classify':$('input[name="classify"]').val(),
                'att':$('input[name="att"]').val()
            },
            function (res) {
                //渲染默认列表数据
                course_ware.update({
                    data: res.data,
                    autoRow: true,
                })
                //渲染已经选择的标签
                course_ware.setValue(select);
            }
        );
    </script>

</form>